<template>
  <div class="playHistory">
    <div class="wrapper">
      <!-- 头部 star  -->
      <div class="header">
        <div class="header_left">
          <router-link tag="a" :to="rou"
            ><img
              :src="require('../assets/img/bar_icon_back_black.png')"
              alt=""
          /></router-link>
        </div>
        <div class="header_center">播放历史</div>
        <div class="header_right">
          <router-link tag="a" :to="'/classification?rou=' + rou"
            >分类</router-link
          >
        </div>
      </div>
      <!-- 头部 end   -->

      <!-- 主体部分 star  -->
      <div class="main">
        <ul>
          <li v-for="item in playhistoryLists" :key="item.id">
            <a @click="listId(null, item.id)">
              <div class="img">
                <img :src="item.img" alt="" />
                <div class="vip"></div>
              </div>
              <div class="word">
                <p>{{ item.name }}</p>
                <div class="tip">
                  <p>经典...</p>
                  <p>175555次</p>
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <!-- 主体部分 end  -->
    </div>
  </div>
</template>

<script>
import { getJsonData } from "../api/home.js";
export default {
  props: ["listenId"],
  data() {
    return {
      rou: null,
      allLists: [], //接受所有的故事
      colleids: [], //接受localStorage里的历史id
      playhistoryLists: [], //收藏列表
    };
  },
  methods: {
    listId(id, listenId) {
      this.$emit("list-id", [id, listenId]);
    },
  },
  created() {
    this.rou = this.$route.query.rou;
    getJsonData().then((data) => {
      this.allLists = data.allLists;
      this.colleids = JSON.parse(localStorage.getItem("playhistory"));
      console.log(this.colleids);
      if(this.colleids !=[]){

        for (var j = 0; j < this.colleids.length; j++) {
          let arr = this.allLists.filter((item) => item.id == this.colleids[j]);
          this.playhistoryLists.push(arr[0]);
        }
      }
      console.log(this.playhistoryLists);
    });
  },
  watch:{
      "listenId":function(){
          console.log(this.listenId);
          if(this.listenId !=null && this.colleids.indexOf(this.listenId)==-1){
          this.colleids.push(this.listenId)
          window.localStorage.setItem("playhistory",JSON.stringify(this.colleids));
          console.log(this.colleids);
        }
      }
  }
};
</script>

<style lang="scss" scoped>
.playHistory {
  .wrapper {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
  }
  .header {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 16px;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .header_left {
    img {
      height: 20px;
      display: block;
    }
  }
  .header_center {
    font-size: 18px;
    font-weight: 500;
  }
  .header_right {
    a {
      color: #3e3e3e;
      font-size: 17px;
      font-weight: 600;
    }
  }
  .main {
    padding: 0 16px 52px;
    ul {
      li {
        padding: 7px 0;
        a {
          display: flex;
        }
        .img {
          position: relative;
          .vip {
            background: url(../assets/img/ic_shouye_vip.png) no-repeat;
            width: 38px;
            height: 15px;
            background-size: 100%;
            position: absolute;
            top: 0;
            left: 0px;
          }
          img {
            height: 96px;
            border-radius: 8px;
            display: block;
          }
        }
        .word {
          color: #141414;
          padding-left: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          & > p {
            height: 44px;
            line-height: 44px;
          }
          .tip {
            font-size: 12px;
            display: flex;
            color: #999;
          }
        }
        .tip {
          p {
            &:nth-child(1) {
              padding: 0 8px 0 16px;
              background: url(../assets/img/xiao.png) left center no-repeat;
              background-size: 13px;
            }
            &:nth-child(2) {
              padding-left: 16px;
              background: url(../assets/img/ic_listen_gray.webp) left center
                no-repeat;
              background-size: 13px;
            }
          }
        }
      }
    }
  }
  /* .main ul{} */
}
</style>